<template>
	<view class="page-group">
		<view class="top-group-view">
			<view class="search-group">
				<image src="../../static/material/ic_search.png" style="width: 28rpx;height: 28rpx;margin-left: 32rpx;"></image>
				<input class="input-box-view" v-model="keyword" @confirm="formSubmit" confirm-type="search" type="text" placeholder="搜索"  placeholder-class="placeholder-view"  />
			</view>
		</view>
		<view class="center-group-view">
			<!-- <view style="height: 104rpx;"></view> -->
			<mescroll-uni ref="mescrollRef" @init="mescrollInit" :top="104" :bottom="160" :up="upOption" @up="upCallback" @down="downCallback">
				<view v-for="(item, index) in accountList" :key="index" :id="index">
					<view class="list-info">
						<image :src="item.avatar" class="item-avatar" mode="aspectFill"></image>
						<view class="item-center-group">
							<text class="item-title">{{item.nickName}}</text>
						<!-- 	<view style="display: flex;">
								<text class="item-fans">粉丝数{{item.fansCount}}</text>
							</view> -->
							<text class="item-display" style="margin-top: 15rpx;">授权时间  {{item.authTime}}</text>
						</view>
						<text class="item-delete" @click="deleteOnClick(item.displayId)">点击解绑</text>
					</view>
				</view>
			</mescroll-uni>
			<!-- <view style="height: 160rpx;"></view> -->
		</view>
		<view class="bottom-group-view">
			<view @click="addAccountClick()" class="add-account-btn">添加抖音号</view>
		</view>
		<uniPopup ref="showAgainPop" type="center" style="z-index: 9991;position: fixed;top: --window-top;left: 0;">
			<view class="pop-group"> 
				<text class="pop-title">解除绑定</text>
				<text class="pop-content">请确认是否解除此账号绑定</text>
				<view style="display: flex;width: 100%;">
					<view class="pop-btn-cancel" @click="cancelClick()">取消</view>
					<view class="pop-btn-sure" @click="confirmClick()">解除</view>
				</view>
			</view>
		</uniPopup>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import configUrls from '@/common/config.js';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	export default {
		mixins: [MescrollMixin],
		components:{
			uniPopup
		},
		data() {
			return {
				upOption:{
					noMoreSize: 1,
					empty:{
						icon: '/static/mine/img_manage_empty.png',
						tip: '没有找到', 
					},
					textNoMore: '没有更多'
				},
				accountList: [],
				status: '0',
				keyword: '',
				chooseDisplayId: '',
				isBack: false,
			}
		},
		onShow() {
			if(this.isBack) {
				this.isBack = false;
				this.downCallback();
			}
		},
		methods: {
			upCallback(page) {
				var that = this;
				this.$Request.postJson(configUrls.getDyAccountList, {
					page: page.num,
					limit: 10,
					status: that.status,
					keywords: that.keyword,
				}).then(res => {
					if (res.code == "10000") {
						const respData = res.data.result.data;
						if (respData == null) {
							that.mescroll.endSuccess(0);
						    return;
						}
						that.mescroll.endSuccess(respData.length);
						if(page.num == 1) that.accountList = []; 
						that.accountList=that.accountList.concat(respData);
					} else {
						that.accountList = [];
						that.mescroll.endSuccess(0);
						that.mescroll.endErr();
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				}); 
			},
			downCallback() {
				this.mescroll.resetUpScroll();
			},
			formSubmit(e) {
				this.mescroll.resetUpScroll();
			},
			addAccountClick() {
				this.isBack = true;
				uni.navigateTo({
					url: './empower'
				});
			},
			deleteOnClick(displayId) {
				this.chooseDisplayId = displayId;
				this.$nextTick(() => {
				    this.$refs['showAgainPop'].open();
				})
			},
			confirmClick:function(){
				let that = this;
				this.$Request.postJsonLoadView(configUrls.unbindAccount, {
					uid: that.chooseDisplayId
				}).then(res => {
					that.$nextTick(() => {
					    that.$refs['showAgainPop'].close();
					})
					if (res.code == "10000") {
						that.mescroll.resetUpScroll();
					} 
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
				}); 
			},
			cancelClick:function(){
				this.$nextTick(() => {
				    this.$refs['showAgainPop'].close();
				})
			},
		}
	}
</script>

<style>
	@import url("../../css/mine/manage.css");
</style>
